﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div style="margin-top: 15px;">
				<el-button type="danger" @click="history.back();"><--后退</el-button>
			</div>
			<h3 style="text-align: center;">我的订单</h3>
			<template>
			<div>
				<el-radio-group v-model="radio" @input="selectOrder()">
					<el-radio-button  label="0" >全部订单</el-radio-button>
					<el-radio-button  label="1">待付款</el-radio-button>
					<el-radio-button  label="2">待签收</el-radio-button>
					<el-radio-button  label="3">已取消</el-radio-button>
				</el-radio-group>
			</div>
				<el-table
					:data="orders"
					style="width: 100%">
					<el-table-column
						label="日期"
						width="190">
						<template slot-scope="scope">
							<i class="el-icon-time"></i>
							<spam style="margin-left: 10px">{{scope.row.creatTime}}</spam>
						</template>
					</el-table-column>
					<el-table-column
							label="商品名"
							width="180">
						<template slot-scope="scope">

							<spam style="margin-left: 10px">{{scope.row.pname}}</spam>
						</template>
					</el-table-column>
					<el-table-column
							label="金额"
							width="190">
						<template slot-scope="scope">

							<spam style="margin-left: 10px">{{scope.row.price}}</spam>
						</template>
					</el-table-column>
					<el-table-column
							label="图片"
							width="190">
						<template slot-scope="scope">

							<el-image :src="scope.row.pimgs" style="width: 150px;height: 150px"></el-image>
						</template>
					</el-table-column>
					<el-table-column
							label="支付状态"
							width="190">
						<template slot-scope="scope">
							<el-button
									@click.native.prevent="alipay(scope.row.productId)"
									type="primary"
									size="small"
									v-show="scope.row.state==1">
								去支付
							</el-button>
							<el-button
									type="info"
									size="small"
									disabled=""
									v-show="scope.row.state==2">
								待签收
							</el-button>
							<el-button
									type="success"
									size="small"
									disabled=""
									v-show="scope.row.state==3">
								已完成
							</el-button>
							<el-button
									type="danger"
									size="small"
									disabled=""
									v-show="scope.row.state==4">
								已取消
							</el-button>

							<!--<spam style="margin-left: 10px">{{scope.row.state}}</spam>-->
						</template>
					</el-table-column>
				</el-table>

			</template>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					orders:[{
						creatTime: '',
						pname:"",
						price:'',
						pimgs:"",
						state:'',

						id:'1',
						sumPrice:'1',
						shopName:'11',
						receiveName:'11',
						productId:'',

					}],
					buyerId:'',
					radio: '0',
					state:'',

					payState:'2'
					//
				}
				,
				methods: {
					//查询订单
					selectOrder:function (){
						$.post("/order/selectMyOrder",{
							state:this.radio}, function (data){
							alert(JSON.stringify(data))
							app.orders = data;
						})
					}

					,
					//支付
					alipay:function (productId){
						$.post("/order/pay",{
							productId:productId,state:this.payState
						},function (data){
							//alert(data)
							app.selectOrder()
						})
					}
				}
				,
				created:function (){
					this.selectOrder();
				}
			});
		</script>
	</body>
</html>
